<template>
  <view class="mine-container">
    <!-- 顶部个人信息栏 -->
    <view class="header-section">
      <view class="flex align-center">
        <image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix" />
        <view class="user-info">
          <view class="u_title">{{ userName }}</view>
          <view class="u_phone">{{ phonenumber}}</view>
        </view>
      </view>
      <view class="user-assets">
        <view class="asset-item">
          <view class="asset-value">{{ balance || '0.00' }}</view>
          <view class="asset-label">余额</view>
        </view>
        <view class="asset-item">
          <view class="asset-value">{{ points || '0' }}</view>
          <view class="asset-label">积分</view>
        </view>
        <view class="asset-item">
          <view class="asset-value">{{ coupons || '0' }}</view>
          <view class="asset-label">优惠券</view>
        </view>
        <view class="asset-item">
          <view class="asset-value">{{ favorites || '0' }}</view>
          <view class="asset-label">收藏</view>
        </view>
      </view>
    </view>

    <!-- 订单中心 -->
    <view class="order-section">
      <view class="order-header flex justify-between align-center">
        <view>订单中心</view>
        <view class="order-all" @click="handleToOrderList">查看全部</view>
      </view>
      <view class="order-status-list flex justify-between">
        <view 
          v-for="(orderData, orderIndex) in orderStatusList" 
          :key="orderIndex" 
          class="order-status-item"
          @click="handleOrderStatus(orderData ? orderData.status : null)"
        >
          <image :src="getOrderIcon(orderData ? orderData.label : '')" class="order-icon" />
          <view class="order-status-label">{{ orderData ? orderData.label : '' }}</view>
          <view v-if="orderData && orderData.badge" class="badge">{{ orderData.badge }}</view>
        </view>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="service-section">
      <view class="service-title">我的服务</view>
      <view class="service-list grid col-4">
        <view 
          v-for="(serviceData, serviceIndex) in serviceList" 
          :key="serviceIndex" 
          class="service-item"
          @click="handleServiceClick(serviceData ? serviceData.onClick : null)"
        >
          <image :src="getServiceIcon(serviceData ? serviceData.label : '')" class="icon" />
          <view class="service-label-horizontal">{{ serviceData ? serviceData.label : '' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: '用户',
      avatar: '/static/images/profile.jpg',
      phonenumber: '138****8888',
      balance: '0.00',
      points: '0',
      coupons: '0',
      favorites: '0',
      orderStatusList: [
        { label: '待付款', status: 0, badge: 1 },
        { label: '待发货', status: 1, badge: 1 },
        { label: '待收货', status: 2, badge: 0 },
        { label: '待评价', status: 3, badge: 0 },
        { label: '售后退款', status: 5, badge: 0 },
      ],
      serviceList: [
        { label: '会员中心', onClick: 'handleBuilding' },
        { label: '我的余额', onClick: 'handleBuilding' },
        { label: '地址管理', onClick: 'handleBuilding' },
        { label: '砍价记录', onClick: 'handleBuilding' },
        { label: '优惠券', onClick: 'handleBuilding' },
        { label: '我的推广', onClick: 'handleBuilding' },
        { label: '我的收藏', onClick: 'handleBuilding' },
        { label: '我的等级', onClick: 'handleBuilding' },
        { label: '积分详情', onClick: 'handleBuilding' },
        { label: '签到中心', onClick: 'handleBuilding' },
        { label: '个人信息', onClick: 'handleToInfo' },
        { label: '我的推广', onClick: 'handleBuilding' },
        { label: '联系客服', onClick: 'handleBuilding' },
      ],
    }
  },
  mounted() {
    console.log('Mine页面已挂载，数据状态：', {
      orderStatusList: this.orderStatusList,
      serviceList: this.serviceList
    });
  },
  methods: {
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    },
    handleToOrderList() {
      this.$tab.navigateTo('/pages/order/list')
    },
    handleOrderStatus(status) {
      if (status === undefined || status === null) {
        console.warn('handleOrderStatus: status is undefined');
        return;
      }
      this.$tab.navigateTo(`/pages/order/list?status=${status}`)
    },
    handleBuilding() {
      this.$modal.showToast('模块建设中~')
    },
    handleServiceClick(methodName) {
      if (!methodName) {
        console.warn('handleServiceClick: methodName is undefined');
        this.handleBuilding();
        return;
      }
      
      if (typeof this[methodName] === 'function') {
        this[methodName]();
      } else {
        console.warn(`handleServiceClick: method ${methodName} not found`);
        this.handleBuilding();
      }
    },
    getServiceIcon(label) {
      if (!label) return '/static/images/my_service/default.png'
      return `/static/images/my_service/${label}.png`
    },
    getOrderIcon(label) {
      if (!label) return '/static/images/my_service/default.png'
      return `/static/images/my_service/${label}.png`
    }
  }
}
</script>

<style lang="scss" scoped>
.mine-container {
  width: 100%;
  height: 100%;
  background: #f5f6f7;
  
  .header-section {
    padding: 40rpx 30rpx 20rpx 30rpx;
    background: linear-gradient(135deg, #f54b4b 0%, #f87e36 100%);
    color: #fff;
    border-radius: 0 0 36rpx 36rpx;
    
    .flex { 
      display: flex; 
    }
    .align-center { 
      align-items: center; 
    }
    .user-info { 
      margin-left: 24rpx; 
    }
    .u_title { 
      font-size: 40rpx; 
      font-weight: bold; 
    }
    .u_phone { 
      font-size: 28rpx; 
      opacity: 0.8; 
    }
    .user-assets {
      display: flex;
      justify-content: space-between;
      margin-top: 36rpx;
      .asset-item {
        text-align: center;
        .asset-value { 
          font-size: 36rpx; 
          font-weight: bold; 
        }
        .asset-label { 
          font-size: 26rpx; 
          opacity: 0.9; 
        }
      }
    }
    .cu-avatar { 
      width: 120rpx; 
      height: 120rpx; 
      border-radius: 50%; 
      overflow: hidden; 
    }
    .icon { 
      width: 80rpx; 
      height: 80rpx; 
    }
  }
  
  .order-section {
    margin: 0 30rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
    padding: 30rpx 0 20rpx 0;
    
    .order-header { 
      font-size: 32rpx; 
      font-weight: 500; 
      margin-bottom: 20rpx; 
      padding: 0 30rpx;
    }
    .order-all { 
      font-size: 26rpx; 
      color: #888; 
    }
    .order-status-list {
      display: flex;
      justify-content: space-between;
      gap: 0 16rpx;
      margin: 0 30rpx;
    }
    .order-status-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: #f8fafc;
      border-radius: 28rpx;
      padding: 28rpx 0 20rpx 0;
      margin: 0 4rpx;
      position: relative;
      transition: all 0.2s ease;
    }
    .order-status-item:active {
      box-shadow: 0 8rpx 32rpx rgba(60,150,243,0.24);
      transform: translateY(-6rpx) scale(1.08);
      background: #f1f7ff;
    }
    .order-icon {
      width: 72rpx;
      height: 72rpx;
      display: block;
      margin: 0 auto;
    }
    .order-status-label {
      font-size: 28rpx;
      margin-top: 20rpx;
      color: #222;
      letter-spacing: 1rpx;
      white-space: nowrap;
    }
    .badge {
      position: absolute;
      top: 16rpx; 
      right: 36rpx;
      background: #f54b4b;
      color: #fff;
      border-radius: 20rpx;
      font-size: 20rpx;
      padding: 0 10rpx;
      min-width: 36rpx;
      min-height: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      box-shadow: 0 4rpx 12rpx rgba(245,75,75,0.24);
    }
  }
  
  .service-section {
    margin: 0 30rpx 48rpx 30rpx;
    background: #fff;
    border-radius: 36rpx;
    box-shadow: 0 8rpx 36rpx rgba(60,150,243,0.16);
    padding: 40rpx 0 36rpx 0;
    
    .service-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 36rpx;
      padding-left: 30rpx;
      display: flex;
      align-items: center;
    }
    .service-title::before {
      content: '';
      display: inline-block;
      width: 10rpx;
      height: 44rpx;
      background: linear-gradient(180deg, #f54b4b 0%, #f87e36 100%);
      border-radius: 6rpx;
      margin-right: 20rpx;
    }
    .service-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 36rpx 0;
      margin: 0 auto;
      max-width: 650rpx;
      background: none;
      box-shadow: none;
      justify-items: center;
      padding: 0 30rpx;
    }
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: all 0.2s ease;
      border-radius: 24rpx;
      padding: 12rpx 0;
      width: 100%;
    }
    .service-item:active {
      box-shadow: 0 8rpx 32rpx rgba(60,150,243,0.24);
      transform: translateY(-8rpx) scale(1.08);
      background: #f7faff;
    }
    .service-item .icon {
      width: 72rpx;
      height: 72rpx;
      display: block;
      margin: 0 auto;
    }
    .service-label-horizontal {
      font-size: 28rpx;
      margin-top: 20rpx;
      text-align: center;
      display: block;
      white-space: nowrap;
      color: #222;
      letter-spacing: 1rpx;
    }
  }
}

/* 平台特定样式 */
/* #ifdef H5 */
.mine-container {
  .order-status-item:hover {
    box-shadow: 0 8rpx 32rpx rgba(60,150,243,0.24);
    transform: translateY(-6rpx) scale(1.08);
    background: #f1f7ff;
  }
  .service-item:hover {
    box-shadow: 0 8rpx 32rpx rgba(60,150,243,0.24);
    transform: translateY(-8rpx) scale(1.08);
    background: #f7faff;
  }
}
/* #endif */

/* #ifdef MP-WEIXIN */
.mine-container {
  .order-status-item {
    /* 微信小程序中移除hover效果，使用active */
  }
  .service-item {
    /* 微信小程序中移除hover效果，使用active */
  }
}
/* #endif */
</style> 